<template>
  <div class="avatar-1-box" :style="avatar">
    <el-image
        v-if="module?.dataSource.avatar.value"
        :fit="avatar.objectFit"
        :style="elImageStyle"
        :src="module.dataSource.avatar.value"
    />
    <img v-else :src="defaultImg" style="width: 100%; height: 100%" alt="touxiang" srcset=""/>
  </div>
</template>
<script lang="ts" setup>
import defaultAvatar from '@/assets/images/people.jpg';
import {IModule} from '@/views/createTemplate/types/IHJNewSchema';
import {useGetCustomStyle} from '../../hooks/useGetCustomStyle';
import {loadResumeAvatar} from "@/http/m_api/template";
import {storeToRefs} from "pinia";
import appStore from "@/store";

const props = defineProps<{
  module: IModule;
}>();

const defaultImg = defaultAvatar;
const {resumeId} = storeToRefs(appStore.useCreateTemplateStore)

const loadData = async () =>{
  if(resumeId.value){
    if(props.module.dataSource.avatar.value.startsWith("blob")){
      const img = await loadResumeAvatar(resumeId.value).catch(()=>{
        props.module.dataSource.avatar.value = require('@/assets/images/people.jpg');
      });
      const blob = new Blob([img], { type: "image/jpeg" })
      props.module.dataSource.avatar.value = URL.createObjectURL(blob)
    }
  }
}

onBeforeUnmount(()=>{
  if(resumeId.value && props.module.dataSource.avatar.value.startsWith("blob")){
    URL.revokeObjectURL(props.module.dataSource.avatar.value)
  }
})

loadData()
// 头像
const avatar = useGetCustomStyle(props.module, 'avatar');

// 返回el-img样式
const elImageStyle = computed(() => {
  return {
    width: '100%',
    height: '100%',
    borderTopLeftRadius: avatar?.value.borderTopLeftRadius,
    borderTopRightRadius: avatar?.value.borderTopRightRadius,
    borderBottomLeftRadius: avatar?.value.borderBottomLeftRadius,
    borderBottomRightRadius: avatar?.value.borderBottomRightRadius
  };
});
</script>
